<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="机台" prop="shaftcode">
        <el-select v-model="maccode" placeholder="请选择机台" @change="selectTrigger">
          <el-option
            v-for="item in macCodeList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="pdfcode" label="品种号" prop="pdfcode">
        <el-input v-model="pdfcode" readonly style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item v-if="construction" label="规格" prop="construction">
        <el-input v-model="construction" style="width: 500px" readonly></el-input>
      </el-form-item>
      <el-form-item v-if="ordercode" label="订单号" prop="ordercode">
        <el-input v-model="ordercode" readonly></el-input>
      </el-form-item>
      <el-form-item v-if="shaftcode" label="轴号" prop="shaftcode">
        <el-input v-model="shaftcode" readonly></el-input>
      </el-form-item>


    </el-form>
    <el-row style="height: 115px">
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #a9ffd2; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('jiangban')">浆斑
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #d2f9ce; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('jiangyou')">浆油
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #edf9ec; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('bingsha')">并纱
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #f2ffe7; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('jiaotou')">绞头
        </el-button>
      </el-col>
    </el-row>
    <el-row style="height: 115px">
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #feff60; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('jiangcaokd')">浆槽开刀
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #e8ea7d; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('jingzhoukd')">经轴开刀
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #e9eab7; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('chetouzk')">车头撞筘
        </el-button>
      </el-col>
      <el-col :span="6" align="center">
        <el-button
          style="width: 90%; height: 100px; background-color: #e2eae9; font-size: xx-large; font-family: 'Microsoft YaHei'"
          @click="handleDefectAdd('huaibian')">坏边
        </el-button>
      </el-col>
    </el-row>


    <el-table v-loading="loading" :data="defectdetailList" style="font-size: large">
      <el-table-column label="轴号" align="center" prop="shaftcode"/>
      <el-table-column label="疵点名称" align="center" width="80" prop="defectname">
        <template slot-scope="scope">
          <dict-tag :options="defectnameOptions" :value="scope.row.defectname"/>
        </template>
      </el-table-column>
      <el-table-column label="位置" align="center" prop="location"/>
      <el-table-column label="描述" align="center" prop="description"/>
      <el-table-column label="数量" align="center" prop="amount"/>
      <el-table-column label="时间" align="center" prop="createTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mesana:defectdetail:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mesana:defectdetail:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <br>

    <hr/>
    <el-table v-loading="loading" :data="defectList">
      <el-table-column label="当前轴总览" align="center">
        <el-table-column label="织轴编号" align="center" prop="shaftcode"/>
        <el-table-column label="缸号" align="center" prop="jarno"/>
        <el-table-column label="浆斑/处" align="center" prop="jiangban"/>
        <el-table-column label="浆油/处" align="center" prop="jiangyou"/>
        <el-table-column label="并纱/根" align="center" prop="bingsha"/>
        <el-table-column label="绞头/根" align="center" prop="jiaotou"/>
        <el-table-column label="浆槽开刀/根" align="center" prop="jiangcaokd"/>
        <el-table-column label="经轴开刀/根" align="center" prop="jingzhoukd"/>
        <el-table-column label="车头撞筘/根" align="center" prop="chetouzk"/>
        <el-table-column label="坏边/只" align="center" prop="huaibian"/>
      </el-table-column>
    </el-table>

    <!-- 添加或修改浆纱数据汇总对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="机器编号" prop="maccode">
          <el-input v-model="form.maccode" placeholder="请输入机器编号" readonly/>
        </el-form-item>

        <el-form-item label="疵点名称" prop="defectname">
          <el-select v-model="form.defectname" placeholder="请选择疵点名称" :readonly="form.id ? null : 'readnoly'">
            <el-option
              v-for="dict in defectnameOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="amount">
          <el-input-number  v-model="form.amount" placeholder="请输入数量" size="big"/>
        </el-form-item>
        <el-form-item label="疵点描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入疵点描述"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
    import {listDefect, getDefect, delDefect, addDefect, updateDefect, exportDefect} from "@/api/mesana/defect";
    import {getMacList, getMachine} from "@/api/mesana/size";
    import {
        listDefectdetail,
        getDefectdetail,
        delDefectdetail,
        addDefectdetail,
        updateDefectdetail,
        exportDefectdetail
    } from "@/api/mesana/defectdetail";

    export default {
        name: "Defect",
        data() {
            return {
                macCodeList: [],
                defectdetailList: [],
                construction: null,
                shaftcode: null,
                ordercode: null,
                pdfcode: null,
                maccode: null,
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 疵点名称字典
                defectnameOptions: [],
                // 班别字典
                shafttypeOptions: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 浆纱机状态
                machine: null,
                // 当前浆轴
                shaftSize: null,
                // 总条数
                total: 0,
                // 疵点管理表格数据
                defectList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    construction: null,
                    ordercode: null,
                    pdfcode: null,
                    pageNum: 1,
                    pageSize: 10,
                    shaftcode: null,
                    jarno: null,
                    jiangban: null,
                    jiangyou: null,
                    bingsha: null,
                    jiaotou: null,
                    jiangcaokd: null,
                    jingzhoukd: null,
                    chetouzk: null,
                    huaibian: null,
                },
                queryParams1: {
                    shaftcode: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    maccode: [
                        {required: true, message: "机器编号不能为空", trigger: "blur"}
                    ],
                    amount: [
                        {required: true, message: "数量不能为空", trigger: "blur"}
                    ],
                }
            };
        },
        created() {
            this.getDicts("dict_defecttype").then(response => {
                this.defectnameOptions = response.data;
            });
            this.getDicts("dict_shiftType").then(response => {
                this.shafttypeOptions = response.data;
            });
            this.getList();
        },
        methods: {
            /** 查询疵点管理列表 */
            getList() {
                this.loading = true;
                this.updateData();

            },
            // 取消按钮

            updateData() {
                getMacList().then(response => {
                    this.macCodeList = response.data.maclist;
                    if ((response.data.maclist).length == 1) {
                        this.maccode = response.data.maclist[0];
                        getMachine(this.maccode).then(res => {
                            this.machine = res.data.machine;
                            this.shaftSize = res.data.shaftSize;
                            this.construction = res.data.shaftSize.construction;
                            this.shaftcode = res.data.shaftSize.shaftcode;
                            this.ordercode = res.data.shaftSize.ordercode;
                            this.pdfcode = res.data.shaftSize.pdfcode;
                            this.queryParams.shaftcode = this.shaftcode;
                            listDefect(this.queryParams).then(response => {
                                this.defectList = response.rows;
                                this.total = response.total;
                                this.loading = false;
                            });
                            this.queryParams1.shaftcode = this.shaftcode;
                            listDefectdetail(this.queryParams1).then(response => {
                                this.defectdetailList = response.rows;
                                this.total = response.total;
                                this.loading = false;
                            });


                        });
                    }

                });
            },

            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {};
                this.resetForm("form");
            },


            getDefectChineseName(defectname) {
                var result = "";
                if (defectname === 'jiangban') {
                    result = "浆斑";
                }
                if (defectname === 'jiangyou') {
                    result = "浆油";
                }
                if (defectname === 'bingsha') {
                    result = "并纱";
                }
                if (defectname === 'jiaotou') {
                    result = "绞头";
                }
                if (defectname === 'jiangcaokd') {
                    result = "浆槽开刀";
                }
                if (defectname === 'jingzhoukd') {
                    result = "经轴开刀";
                }
                if (defectname === 'chetouzk') {
                    result = "车头撞筘";
                }
                if (defectname === 'huaibian') {
                    result = "坏边";
                }
                return result;

            },


            handleDefectAdd(defectname) {
                this.reset();
                this.open = true;
                this.form.maccode = this.maccode;
                this.form.defectname = defectname;
                this.title = "添加" + this.getDefectChineseName(defectname) + "疵点";
                this.updateData();


            },
            /** 下拉框选择事件 */
            selectTrigger(params) {
                console.log(params)
            },

            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getDefectdetail(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改疵点管理";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateDefectdetail(this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addDefect(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$confirm('是否确认删除疵点管理编号为"' + ids + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delDefect(ids);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有疵点管理数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.exportLoading = true;
                    return exportDefect(queryParams);
                }).then(response => {
                    this.download(response.msg);
                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>
<style lang="css">
  .el-input-number.is-without-controls .el-input__inner {
    width: 100px;
    line-height: 300px;
    height: 280px;
  }
</style>
